<template>
  <div class="category-echart">
    <XtEchars :options="options" height="300px" />
  </div>
</template>

<script setup lang="ts">
import { defineProps, computed } from "vue"
import XtEchars from "@/base_ui/echars"
import { EChartsOption } from "echarts"
const props = defineProps<{
  labels: string[]
  value: number[]
}>()
const options = computed<EChartsOption>(() => {
  return {
    polar: {
      radius: [30, "80%"],
    },
    angleAxis: {
      max: 20000,
      startAngle: 75,
    },
    radiusAxis: {
      type: "category",
      data: props.labels,
    },
    tooltip: {},
    series: {
      type: "bar",
      data: props.value,
      coordinateSystem: "polar",
      label: {
        show: true,
        position: "middle",
        formatter: "{b}: {c}",
      },
    },
  }
})
</script>
<style lang="less" scoped></style>
